import React from 'react';
import {
    StyleSheet,
    ScrollView,
    Text,
    View,
    TouchableOpacity,
    WingBlank,
    Flex,
    Button,
} from 'react-native';
import {Tabs} from '@ant-design/react-native';

const renderContent = (tab, index) => {
    const style = {
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd',
    };
};
export default class Owner extends React.Component {
    constructor() {
        //调用基类的所有的初始化方法
        super();

        // 设置当前组件的属性
        this.state = {
            //列表
            arr: [
                {
                    name: '胡歌',
                    tel: '15896541236',
                    adress: '重庆市合川区华帝街华帝王朝33号',
                    tuijian: '陈总',
                    numcar: 2,
                    numloc: 1,
                },
                {
                    name: 'LI歌',
                    tel: '15896541236',
                    adress: '重庆市合川区华帝街华帝王朝33号',
                    tuijian: '陈总',
                    numcar: 2,
                    numloc: 1,
                },
                {
                    name: 'LI2歌',
                    tel: '15896541236',
                    adress: '重庆市合川区华帝街华帝王朝33号',
                    tuijian: '陈总',
                    numcar: 2,
                    numloc: 1,
                },
                {
                    name: 'LI3歌',
                    tel: '15896541236',
                    adress: '重庆市合川区华帝街华帝王朝33号',
                    tuijian: '陈总',
                    numcar: 2,
                    numloc: 1,
                },
            ],
        };
    }

    render() {
        const tabs = [
            {title: '全部业主'},
            {title: '已购车位业主'},
            {title: '未购车位业主'},
        ];

        const style = {
            alignItems: 'center',
            justifyContent: 'center',
            height: 150,
            backgroundColor: '#fff',
        };
        return (
            <View style={{flex: 1}}>
                <Tabs tabs={tabs}>
                    <View>
                        {this.state.arr.map((item) => {
                            return (
                                <>
                                    <View
                                        style={{
                                            flexDirection: 'column',
                                            paddingTop: '3%',
                                            borderWidth: 0.3,
                                        }}>
                                        <View
                                            style={{
                                                flexDirection: 'row',
                                                justifyContent: 'space-between',
                                            }}>
                                            <Text style={{fontSize: 16}}>
                                                姓名：{item.name}
                                            </Text>

                                            <Text style={{fontSize: 16}}>
                                                电话：{item.tel}
                                            </Text>
                                        </View>
                                        <View
                                            style={{
                                                flexDirection: 'row',
                                                justifyContent: 'space-between',
                                            }}>
                                            <Text style={{fontSize: 16}}>
                                                住址:{item.adress}
                                            </Text>
                                            <Text style={{fontSize: 16}}>
                                                推荐人:{item.tuijian}
                                            </Text>
                                        </View>
                                        <View>
                                            <Text style={{fontSize: 16}}>
                                                有车 {item.numcar}辆{' '}
                                                {item.numloc}车位 有意向买车位{' '}
                                            </Text>
                                        </View>
                                    </View>
                                </>
                            );
                        })}
                    </View>
                </Tabs>
            </View>
        );
    }
}
export const title = 'Tabs';
export const description = 'Tabs example';
